<template>
  <div class="ke">
    <div class="kflexc" style="padding: 20px; cursor: pointer;" @click="$router.back(-1)">
      <div><i class="el-icon-back" style="font-weight: bold; font-size: 18px;"></i></div>
      <div style="margin-left: 10px; color: rgb(86, 86, 86); font-weight: bold;">{{$route.query.plan_mobile_produced}}</div>
      <div style="margin-left: 10px; font-size: 14px;">订单ID:{{$route.query.id}}</div>
    </div>
    <div style="padding: 20px;">
      <div class="kflex">
        <div style="color: rgb(51, 51, 51);">上游给我的佣金规则：</div>
        <div style="color: rgb(121, 121, 121);" v-if="list2.p.commission_notes">{{list2.p.commission_notes}}</div>
        <div v-if="!list2.p.commission_notes">
          <div style="color: rgb(121, 121, 121);" v-if="list2.p == null">未配置</div>
          <div style="color: rgb(121, 121, 121);" v-if="list2.p != null">
            <span v-if="list2.p.active_commission != 0">已激活，佣金{{list2.p.active_commission}}元.</span>
            <span v-if="list2.p.first_recharge_one_commission != 0">首充大于{{list2.p.first_recharge_one}}元，佣金{{list2.p.first_recharge_one_commission}}元</span>
            <span v-if="list2.p.first_recharge_two_commission != 0">或者首充大于{{list2.p.first_recharge_two}}元，佣金{{list2.p.first_recharge_two_commission}}元.</span>
            <span v-if="list2.p.recharge_amount_one_commission != 0">累计充值大于{{list2.p.recharge_amount_one}}元，佣金{{list2.p.recharge_amount_one_commission}}元</span>
            <span v-if="list2.p.recharge_amount_two_commission != 0">且累计充值大于{{list2.p.recharge_amount_two}}元，佣金{{list2.p.recharge_amount_two_commission}}元.</span>
          </div>
        </div>

      </div>
      <el-table :data="list" border style="width: 100%; margin: 20px 0;" >
        <el-table-column align='center' prop='yue' label="月份"></el-table-column>
        <!-- <el-table-column align='center' label="分成佣金">
          <template slot-scope="scope">
            <div class="kflexcc">
              <div v-if="scope.row.type == 1">{{scope.row.commission_amount}}</div>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column align='center' label="首充佣金">
          <template slot-scope="scope">
            <div >
              <div v-for="(item,index) in scope.row.income_logs">
                <div v-if="item.type == 1">
                  {{item.order_money}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="充值佣金">
          <template slot-scope="scope">
            <div >
              <div v-for="(item,index) in scope.row.income_logs">
                <div v-if="item.type == 2">
                  {{item.order_money}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="实名佣金">
          <template slot-scope="scope">
            <div >
              <div v-for="(item,index) in scope.row.income_logs">
                <div v-if="item.type == 3">
                  {{item.order_money}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="在网奖励">
          <template slot-scope="scope">
            <div >
              <div v-for="(item,index) in scope.row.income_logs">
                <div v-if="item.type == 4">
                  {{item.order_money}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="达量佣金">
          <template slot-scope="scope">
            <div >
              <div v-for="(item,index) in scope.row.income_logs">
                <div v-if="item.type == 5">
                  {{item.order_money}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="手续费">
          <template slot-scope="scope">
            <div >
              <div v-for="(item,index) in scope.row.income_logs">
                <div v-if="item.type == 6">
                  {{item.order_money}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="其他佣金">
          <template slot-scope="scope">
            <div >
              <div v-for="(item,index) in scope.row.income_logs">
                <div v-if="item.type == 7">
                  {{item.order_money}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="扣罚金额">
          <template slot-scope="scope">
            <div >
              <div v-for="(item,index) in scope.row.income_logs">
                <div v-if="item.type == 8">
                  {{item.order_money}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='rebate_amount' label="返利支出"></el-table-column>
        <el-table-column align='center' prop='commission_amount' label="佣金支出"></el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "ke",
    data() {
      return {
        list:[],
        all:{},
        total:0,
        list2:{
          p:""
        }
      }
    },
    created() {
      this.getlist()
      axios.get('/api/plan-market/income2/order/rule?id='+this.$route.query.id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list2 = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },
    mounted() {

    },
    methods: {

      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/income2/order/incomes?id='+this.$route.query.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              let obj = response.data.data
              let arr = Object.keys(obj)
              arr.forEach(item=>{
                obj[item].yue = item

                console.log(obj[item])
                let commission_amount = 0
                if(obj[item].expend_logs.length > 0){
                  obj[item].expend_logs.forEach(item2=>{
                    commission_amount = commission_amount + parseFloat(item2.commission_amount)
                  })
                }
                obj[item].commission_amount = commission_amount

                let rebate_amount = 0
                if(obj[item].fanli_logs.length > 0){
                  obj[item].fanli_logs.forEach(item2=>{
                    rebate_amount = rebate_amount + parseFloat(item2.rebate_amount)
                  })
                }
                obj[item].rebate_amount = rebate_amount

                // if(obj[item].income_logs.length > 0){
                //   obj[item].type = obj[item].income_logs[0].type
                //   obj[item].order_money = obj[item].income_logs[0].order_money
                // }

                this.list.push(obj[item])
              })

              console.log(this.list)
              // this.total = response.data.data.total
              // this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ke {
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
